// type of font-size
@font-size-small: 12px;
@font-size-default: 14px;
@font-size-large: 16px;

// button of size
@btn-size-small: 4px 8px;
@btn-size-default: 2px 12px;
@btn-size-large: 0px 22px;

// button of height
@btn-size-24: 24px;
@btn-size-32: 32px;
@btn-size-40: 40px;

// theme type of color
@type-color-primary: #1890ff;
@type-color-ghost: transparent;
@type-color-dashed: #ffffff;
@type-color-link: #ffffff;
@type-color-text: #ffffff;
@type-color-default: #ffffff;
@type-color-danger: #ff4d4f;

// text type of color
@type-color-text1: #232323;
@type-color-text2: #ffffff;
@type-color-text3: #1890ff;
@type-color-text4: #ff4d4f;
@type-color-text5: #40a9ff;

// background color
@type-color-back1: #ffffff;
@type-color-back2: #40a9ff;
@type-color-back3: #ff4d4f;

// type of border
@type-border-dashed: 1px dashed;
@type-border-solid: 1px solid;
@type-border-none: none;

// type of border color
@type-color-border1: #ff4d4f;
@type-color-border2: #d9d9d9;
@type-color-border3: #ffffff;
@type-color-border3: #40a9ff;

// type of box-shadow color
@type-color-shadow1: #40a9ff;
@type-color-shadow2: #ff4d4f;

// type of box-shadow range
@type-size-shadow: 0 0 1px;

// button style of raduis type
@type-raduis-5: 6px;
@type-raduis-10: 12px;
@type-raduis-25: 24px;
@type-raduis-30: 36px;
@type-raduis-40: 48px;
@type-raduis-50: 50%;


.btn {
    padding: @btn-size-default;
    background-color: @type-color-default;
    border: @type-border-solid @type-color-border2;
    border-radius: @type-raduis-5;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    height: @btn-size-32;

    &-default:hover {
        color: @type-color-border3;
        border: @type-border-solid @type-color-border3;
    }

    &-default:focus {
        color: @type-color-border3;
        border: @type-border-solid @type-color-border3;
        box-shadow: @type-color-shadow1 @type-size-shadow;
    }

    &-primary {
        background-color: @type-color-primary;
        color: @type-color-text2;
        border: @type-border-none
    }

    &-primary:hover {
        background-color: @type-color-back2;
        color: @type-color-text2;
        border: @type-border-none;
    }

    &-primary:focus {
        background-color: @type-color-back2;
        border: @type-border-none;
        box-shadow: @type-color-shadow1 @type-size-shadow;
    }

    &-dashed {
        border: @type-border-dashed @type-color-border2;
    }

    &-dashed:hover {
        color: @type-color-border3;
        border: @type-border-dashed @type-color-border3;
    }

    &-dashed:focus {
        color: @type-color-border3;
        box-shadow: @type-color-shadow1 @type-size-shadow;
        border: @type-border-dashed @type-color-border3;
    }

    &[disabled] {
        background-color: inherit;
        border: inherit;
        cursor: not-allowed;
        color: rgba(0, 0, 0, 0.25);
        border: @type-border-solid @type-color-border2;
    }
}